<template>
  <div class="pointListTable">
    <div class="Etitle">
      <el-row>
        <el-col :span="17">
          <div class="grid-content bg-purple">

            <!--<router-link to="/miniCard/statement/horizon">-->
              <!--{{this.pointCid}} > 测点列表-->
            <!--</router-link>-->
            <span @click="returnEquip" style="cursor: pointer; color: #0072F3">{{this.pointCid}} </span> > 测点列表
          </div>
        </el-col>
        <el-col :span="7"  style="text-align: right; padding-right: 7px">
          <div class="grid-content bg-purple-light">
            <el-button class="indieWidth" type="primary" @click="showRestorePointMask()" >
              <img :src="reduction" style="vertical-align: middle"/>还原测点
            </el-button>
            <el-button class="indieWidth deleteBtn" type="primary" @click="deletemore" :disabled="disabled">
              <img :src="Delete" style="vertical-align: middle"/>批量删除
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="pagination-container footerPage">
      <el-pagination
        @current-change="CurrentChange"
        @size-change="SizeChange"
        :page-sizes="[5, 10, 20, 50]"
        background layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div class="table">
      <el-table
        :data="pointData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;height:500px; "
        :header-cell-style="{background:'#f7f8f9',height: '20px',padding:'5px 0px'}"
        @selection-change="moreDelete"
        height="500px"
      >
        <el-table-column type="selection" align="center" width="40px" @selection-change="moreDelete"></el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          sortable
          width="170px">
          <template slot-scope="scope">
            <span v-if="scope.row.value3 === '0'">正常</span>
            <!--<span v-if="scope.row.value3 === '1'">通讯中断</span>-->
            <span v-if="scope.row.value3 != '0'">告警</span>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="240px"
        >
          <template slot-scope="scope">
            <span class="viewDetail" @click="showViewPointMask(scope.$index,scope.row)" title="查看" ></span>
            <span class="update" @click="showUpdatePointMask(scope.$index,scope.row)" title="编辑" ></span>
            <span class="delete" @click="deletePointData(scope.$index, scope.row)" title="删除" ></span>
            <!--<el-button class="tableIcon" title="查看" @click="showViewPointMask(scope.$index,scope.row)" type="text" size="small">-->
              <!--<img :src="detail" alt="查看"/>-->
            <!--</el-button>-->
            <!--<el-button @click="showUpdatePointMask(scope.$index,scope.row)" class="tableIcon" title="编辑" type="text" size="small">-->
              <!--<img :src="redact" alt="编辑"/>-->
            <!--</el-button>-->
            <!--<div class="delete">-->
              <!--<el-button type="text"   class=" tableIcon" title="删除" @click="deletePointData(scope.$index, scope.row)">-->
                <!--<img :src="wraningDelete" alt="删除"/>-->
              <!--</el-button>-->
            <!--</div>-->
            <delete-point-dialog></delete-point-dialog>
            <!--<el-dropdown trigger="click" class="overviewDropdown">
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-button class="associatedbuttom" type="button" @click="showconfigurationRuleMask(scope.$index, scope.row)">配置规则</el-button>——————
                <el-button class="associatedbuttom" type="button" @click="showapplicationMask(scope.$index, scope.row)">测点应用</el-button>
              </el-dropdown-menu>
            </el-dropdown>-->
              <el-button class="associatedbuttom" type="button" @click="showconfigurationRuleMask(scope.$index, scope.row)">配置规则</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <view-point-dialog v-if="viewPointFalse" @giveFalse="VdialogReturn" :viewPoint = 'viewPointData'></view-point-dialog>
    <update-point-dialog v-if="updatePointFalse" @giveFalse="updatedialogReturn" :viewPoint = 'viewPointData' :Pid = 'projectPid' v-on:diaStatus = "diaStaus"></update-point-dialog>
    <configuration-rule-dialog v-if="configurationRuleFalse" @giveFalse="configurationdialogReturn" :viewPoint = 'viewPointData'  :configPid = 'projectPid' :index = 'viewIndex' v-on:rerule = "reruleStaus"></configuration-rule-dialog>
    <point-application-dialog v-if="applicationFalse" @giveFalse="applicationdialogReturn" :viewPoint = 'viewPointData' :Pid = 'projectPid' v-on:restars = 'restarStaus'></point-application-dialog>
    <restore-point-dialog v-if="RestorePointFalse" @giveFalse="RestorePointFalseReturn" :Cid = 'this.pointCid' :Pid = 'projectPid' v-on:diaStatus = 'restarStaus'></restore-point-dialog>

  </div>
</template>
<script>
import viewPointDialog from './viewPointDialog'
import updatePointDialog from './updatePointDialog'
import deletePointDialog from './deletePointDialog'
import configurationRuleDialog from './ConfigurationRuleDialog'
import pointApplicationDialog from './pointApplicationDialog'
import RestorePointDialog from './RestorePoint'
import detail from '@/assets/components/detail.png'
import redact from '@/assets/components/redact.png'
import wraningDelete from '@/assets/components/wraningDelete.png'
import reduction from '@/assets/components/reduction.png'
import Delete from '@/assets/components/delete.png'
import axios from 'axios'
export default {
  props: {
    pointCid: '',
    activStatus: ''
  },
  components: { viewPointDialog, updatePointDialog, deletePointDialog, configurationRuleDialog, pointApplicationDialog, RestorePointDialog },
  data() {
    return {
      detail,
      redact,
      wraningDelete,
      reduction, // 还原按钮
      Delete,
      sta: '',
      reactive: '1',
      restars: '1',
      disabled: true,
      viewPointFalse: false,
      updatePointFalse: false,
      configurationRuleFalse: false,
      applicationFalse: false,
      RestorePointFalse: false,
      viewPoint: {}, // 查看测点
      Cid: this.pointCid,
      viewPointData: {},
      viewIndex: '',
      projectPid: this.$route.query.pid,
      pointData: [], // 测点总览信息
      multipleSelection: '',
      submitPoint: {
        access_token: window.localStorage.getItem('access_token'),
        type: 'object_station_condition',
        data: {
          condition: {
            pid: 'default',
            cid: 'plc0003'
          },
          page: {
            page_size: '10',
            page_number: '1'
          }
        }
      },
      deletePoint: {
        access_token: window.localStorage.getItem('access_token'),
        type: 'object_station_hide',
        pid: localStorage.getItem('num'),
        cid: this.pointCid,
        ids: []
      },
      // 还原测点
      reductionPoint: {
        access_token: window.localStorage.getItem('access_token'),
        type: 'object_station_restore',
        pid: this.$route.query.pid,
        cid: this.pointCid,
        ids: []
      },
      options: [],
      value: '',
      cols: [
        { prop: 'oid', label: '测点编号', width: '190px', sortable: true },
        { prop: 'name', label: '测点名称', width: '200px', sortable: true },
        { prop: 'type', label: '测点类型', width: '230px', sortable: true },
        { prop: 'show_data', label: '显示值' }
      ],
      total: 0
    }
  },
  mounted() {
    this.queryPointData()
    if (this.deletePoint.ids === []) {
      this.disabled = this.disabled
    } else {
      this.disabled = !this.disabled
    }
  },
  methods: {
    returnEquip() {
      this.active = '1'
      this.$emit('tabStaus', this.active)
    },
    showViewPointMask(index, row) {
      this.viewPointData = row
      this.viewPointFalse = !this.viewPointFalse
    },
    // 父组件接收值
    VdialogReturn(data) {
      this.viewPointFalse = data // data仅仅代表参数 这里等同于子组件roleDialogMask
    },
    showUpdatePointMask(index, row) {
      this.viewPointData = row
      this.updatePointFalse = !this.updatePointFalse
    },
    // 修改测点信息，父组件接收值
    updatedialogReturn(data) {
      this.updatePointFalse = data
    },
    showconfigurationRuleMask(index, row) {
      this.viewIndex = index
      this.viewPointData = row
      this.configurationRuleFalse = !this.configurationRuleFalse
    },
    // 配置规则信息，父组件接收值
    configurationdialogReturn(data) {
      this.configurationRuleFalse = data
    },
    showapplicationMask(index, row) {
      this.viewPointData = row
      this.applicationFalse = !this.applicationFalse
    },
    // 测点应用，父组件接收值
    applicationdialogReturn(data) {
      this.applicationFalse = data
    },
    showRestorePointMask() {
      this.RestorePointFalse = !this.RestorePointFalse
    },
    // 还原测点，父组件接收值
    RestorePointFalseReturn(data) {
      this.RestorePointFalse = data
    },
    // 查询测点信息
    queryPointData() {
      this.submitPoint.data.condition.pid = this.projectPid
      this.submitPoint.data.condition.cid = this.pointCid
      axios.post('/project', this.submitPoint, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        this.pointData = res.data.data.items
        this.total = parseInt(res.data.data.page.total)
      })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 当前页
    CurrentChange(val) {
      this.submitPoint.data.page.page_number = (val) + ''
      this.queryPointData()
    },
    // 每页显示多少条
    SizeChange(pageSize) {
      this.submitPoint.data.page.page_size = (pageSize) + ''
      this.queryPointData()
    },
    // 修改成功监听刷新列表
    diaStaus: function(dialogStatus) {
      this.reactive = dialogStatus
      console.log(this.reactive)
      this.queryPointData()
    },
    // 还原成功监听刷新列表
    restarStaus: function(dialogStatus) {
      this.restars = dialogStatus
      this.queryPointData()
    },
    // 配置规则配置成功监听刷新列表
    reruleStaus: function(dialogStatus) {
      this.restars = dialogStatus
      this.queryPointData()
    },
    // 删除测点
    deletePointData(index, row) {
      console.log(row)
      var deleteid = []
      deleteid.push(row.oid)
      this.deletePoint.ids = deleteid
      this.deletePoint.cid = row.cid
      this.$confirm('确认删除测点？', '提示', {
        cancelButtonClass: 'userCancel',
        confirmButtonClass: 'userConfirm',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        axios.post('/project', this.deletePoint, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.queryPointData()
        })
      }).catch(() => {
      })
    },
    // 获取多选项
    moreDelete(val) {
      this.multipleSelection = val
      var deletemoreid = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        deletemoreid.push(this.multipleSelection[i].oid)
      }
      this.deletePoint.ids = deletemoreid
      this.reductionPoint.ids = deletemoreid
    },
    // 多个删除
    deletemore() {
      if (this.deletePoint.ids.length === 0) {
        this.$message({
          showClose: true,
          message: '请勾选要批量删除的测点！',
          type: 'error'
        })
      } else {
        this.$confirm('确认删除测点？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          axios.post('/project', this.deletePoint, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.queryPointData()
          })
        }).catch(() => {
        })
      }
    },
    // 还原测点
    queryReductionPoint() {
      axios.post('/project', this.reductionPoint, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        this.queryPointData()
      })
        .catch(function(error) {
          console.log(error)
        })
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .pointListTable{
    width: 100%;
    height: 500px;
  }
  .viewDetail{
    padding: 2px 9px 3px 14px;
    background: url('../../../../../assets/reports/detail_normal.png') no-repeat center;
  }
  .viewDetail:hover{
    cursor: pointer;
    padding: 2px 9px 3px 14px;
    background: url('../../../../../assets/reports/detail_hover.png') no-repeat center;
  }
  .update{
    padding: 2px 9px 3px 14px;
    background: url('../../../../../assets/reports/redact_normal.png') no-repeat center;
  }
  .update:hover{
    cursor: pointer;
    padding: 2px 9px 3px 14px;
    background: url('../../../../../assets/reports/redact_hover.png') no-repeat center;
  }
  .delete{
    padding: 2px 9px 3px 14px;
    background: url('../../../../../assets/reports/delete_normal.png') no-repeat center;
  }
  .delete:hover{
    cursor: pointer;
    padding: 2px 9px 3px 14px;
    background: url('../../../../../assets/reports/delete_hover.png') no-repeat center;
  }
  /deep/ .el-table td{
    border-bottom: none;
    border-right: none;
    padding: 11px 0;
  }
  .Etitle{
    width: 100%;
    height: 50px;
    font-size:14px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color:rgba(50,56,66,1);
    background-color: #F0F3F5;
    line-height:21px;
    padding-left: 20px;
  }
  /deep/ .gutter{
    background-color: #F7F8F9;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #333B3D;
    border-color: #333B3D ;
    color: #fff;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /*/deep/ .el-button--primary {*/
    /*height: 30px;*/
    /*font-size: 14px;*/
    /*padding: 6px 14px;*/
    /*background: #25B6C7;*/
    /*border-color: #25B6C7;*/
  /*}*/
  .deleteBtn{
    background-color: #0F1516;
    border-color: #0F1516;
  }

  // 更多信息
  /deep/ .overviewDropdown {
    width:74px;
    margin-left: 5px;
    top: 0px;
    cursor: pointer;
  }
  /deep/ .el-dropdown-link {
    font-size: 10px;
    padding:2px;
    color: #0072F3;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .associatedbuttom {
    text-align: left;
    color: #323842;
    border: none;
    margin-left: 5px;
    padding: 10px;
    height: 24px;
    width: 88px;
    font-size: 12px;
  }
  /deep/ .associatedbuttom:hover {
    background: #fff;
    color: #0072F3;
  }
  /deep/ .associatedbuttom:active {
    background: #fff;
    color: #0072F3;
  }
/deep/ .el-table td{
  border-bottom: none;
  border-right: none;
  padding: 11px 0;
}

</style>
